<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教学楼</title>
    <style>
		/* 容器效果 */
        .image-container {
            width: 550px;
            height: 400px;
            overflow: hidden;/* 溢出内容隐藏 */
            position: relative;
            margin:0 auto;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        /* 图片链接样式 */
        .image-link {
            display: block;/* 块级元素显示 */
            width: 100%;
            height: 100%;
        }
        /* 图片默认样式 */
        .image-link img {
            width: 100%;
            height: 100%;
            object-fit: cover;/* 保持比例填充容器 */
            transition: transform 0.5s ease, filter 0.3s ease;/* 过渡动画效果 */
        }
        /* 鼠标悬停时图片效果 */
        .image-link:hover img {
            transform: scale(1.1);/* 放大1.1倍 */
            filter: brightness(1.05);/* 提高亮度 */
        }
        /* 图片说明文字样式 */
        .image-caption {
            position: absolute;
            bottom: 0;/* 定位到底部 */
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);/* 半透明黑色背景 */
            color: white;
            padding: 10px;
            transform: translateY(100%);/* 初始位置(完全隐藏) */
            transition: transform 0.3s ease;/* 过渡动画 */
        }
        /* 悬停时文字显示效果 */
        .image-link:hover .image-caption {
            transform: translateY(0);/* 上移显示完整内容 */
        }
    </style>
</head>
<body>
    <div class="image-container">
        <a href="img/校园小径.jpg" class="image-link" >
            <img src="img/校园小径.jpg" alt="">
            <div class="image-caption">
            	点击查看大图
            </div>
        </a >
    </div>
</body>
</html>